<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/game_hall.css">
</head>
<body>
    <div class="nav">
        五子棋
    </div>
    <div class="container">
        <div>
            <!-- 显示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        console.log("获取用户信息");
        $.ajax({
            url: "/getUserInfo",
            type: "GET",
            success: function(result) {
                console.log(result);
                if(result.code == 200) {
                    let screenDiv = document.querySelector('#screen');
                    var user = result.data;
                    screenDiv.innerHTML = '玩家：' + user.userName + ' 分数：' 
                                            + user.score + '<br>比赛场次：' 
                                            + user.totalCount + ' 获胜场数：' + user.winCount;
                }else if(result.code == 401) {
                    location.assign("/login.html");
                }
            }
        }); 


        

        

        // 初始化 webSocket
        let webSocketUrl = 'ws://' + location.host + '/findMatch';
        let webSocket = new WebSocket(webSocketUrl);
        
        webSocket.onmessage = function(e) {
            // 处理服务器返回的响应数据
            let resp = JSON.parse(e.data);
            console.log(resp);
            let matchButton = document.querySelector("#match-button");
            if (resp.code != 200) {
                if (resp.code == 401) {
                    // 用户未登录
                    
                } else if (resp.code == 402) {
                    alert("检测到当前账号游戏多开！请检查登录情况！");
                   
                } else {
                    alert("异常情况：" + resp.errorMessage);
                }
                location.replace("/login.html");
                return;
            }
            if (resp.data.matchMessage == 'START') {
                console.log("成功进入匹配队列");
                matchButton.innerHTML = "匹配中...(点击停止)";
            } else if (resp.data.matchMessage == 'STOP') {
                console.log("结束匹配");
                matchButton.innerHTML = "开始匹配";
            } else if (resp.data.matchMessage == 'SUCCESS') {
                // 成功匹配到对手, 进入游戏房间
                console.log(resp.data.rival);
                alert("匹配到对手：" + resp.data.rival.name + " 分数：" + resp.data.rival.score);
                location.replace("/game_room.html");
            } else {
                console.log("接收到非法响应！" + resp.data);
            }
        }

        // 监听页面关闭事件，在页面关闭之前，手动调用 webSocker 的 close 方法
        // 防止连接还没断开就关闭窗口
        window.onbeforeunload = function() {
            webSocket.close();
        }

        // 为匹配按钮添加点击事件
        let matchBtn = document.querySelector('#match-button');
        matchBtn.onclick = function() {
            // 在发送 websocket 请求前，先判断连接是否正常
            if(webSocket.readyState == webSocket.OPEN) {
                if(matchBtn.innerHTML == "开始匹配") {
                    console.log("开始匹配");
                    webSocket.send(JSON.stringify({
                        message: "START",
                    }));
                } else if(matchBtn.innerHTML == "匹配中...(点击停止)") {
                    console.log("停止匹配");
                    webSocket.send(JSON.stringify({
                        message: "STOP",
                    }));
                }
            } else {
                alert("当前连接已断开！请重新登录");
                location.replace("/login.html");
            }
        }
    </script>
</body>
</html>